<template>
    <div class="content-wrapper">
        <ul :class="['content', { 'foot-hide': footHide }]">
            <li :class="['full flex', { 'img-full': imgFull }]">
                <slot v-if="$slots.default"></slot>
                <Img
                    v-else
                    :src="pdfUrl"
                />
            </li>
        </ul>
        <div
            v-if="!footHide"
            class="footer"
        >
            <Button
                :loading="loading"
                :disabled="disabled"
                @click="handleConfirm"
            >
                {{ btnText }}
            </Button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'FrameContent',
    components: {},
    props: {
        pdfUrl: {
            type: String,
            default: '',
        },
        loading: {
            type: Boolean,
            default: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        btnText: {
            type: String,
            default: '确定',
        },
        footHide: {
            type: Boolean,
            default: () => false,
        },
        imgFull: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {};
    },
    mounted() {},
    methods: {
        async handleConfirm() {
            this.$emit('on-confirm');
        },
    },
};
</script>

<style lang="less" scoped>
@import '~@/assets/css/common.less';
</style>
